<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="8">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <WorkerInfo/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <WorkerList/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col :xs="24" :sm="24" :lg="12">
        <el-row :gutter="8">
          <div class="survey-data">
            实时环境监测数据
          </div>
        </el-row>
        <el-row :gutter="8">
          <div class="survey-data">
              <DataFirst/>
            </div>
        </el-row>
        <el-row :gutter="8">
          <div class="survey-data">
            <DataSecond/>
          </div>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-row :gutter="8">
          <div class="survey-data">
            实时环境监测数据
          </div>
        </el-row>
        <el-row :gutter="8">
          <div class="survey-data">
            <DataThird/>
          </div>
        </el-row>
        <el-row :gutter="8">
          <div class="survey-data">
            <DataFourth/>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import PieChart from './components/PieChart'
  import WorkerInfo from './components/WorkerInfo'
  import WorkerList from './components/WorkerList'
  import DataFirst from './components/DataFirst'
  import DataSecond from './components/DataSecond'
  import DataThird from './components/DataThird'
  import DataFourth from './components/DataFourth'
  export default {
    name: 'DashboardAdmin',
    components: {
      PieChart,
      WorkerInfo,
      WorkerList,
      DataFirst,
      DataSecond,
      DataThird,
      DataFourth
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 8px 12px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 0px 0px 0;
      margin-bottom: 8px;
    }
    .survey-data{
      text-align: center;
      background: #fff;
      padding: 10px 0px 10px 0px;
      margin: 0px 4px
    }
  }
</style>
